import React from 'react';
import { Row, Col } from 'antd';
import cn from 'classnames';

import ReactEcharts from '@/components/Echarts';
import styles from './style.less';

const renderLine = detail => {
    const { remainList = [], referenceDataList = [] } = detail;
    const values = remainList.map(item => item.num);
    const planValues = referenceDataList.map(item => item.num);
    const maxLen = Math.max(values.length, planValues.length);
    const xValues = Array(maxLen)
        .fill(0)
        .map((item, index) => index);
    return (
        <ReactEcharts
            style={{
                width: '100%',
                height: '100%'
            }}
            option={{
                color: ['#597EF7', '#FFA22D'],
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}'
                },
                grid: {
                    right: 0
                },
                legend: {
                    x: 24,
                    y: 'top',
                    data: ['实际线', '参考线']
                },
                xAxis: [
                    {
                        type: 'category',
                        name: '',
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(0, 0, 0, 0.1)'
                            }
                        },
                        axisLabel: {
                            color: 'rgba(0, 0, 0, 0.45)'
                        },
                        splitLine: { show: false },
                        axisTick: { show: false },
                        data: xValues
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '',
                        axisTick: { show: false },
                        axisLine: { show: false },
                        axisLabel: {
                            interval: 20,
                            formatter: '{value}'
                        }
                    }
                ],
                calculable: true,
                series: [
                    {
                        name: '实际线',
                        type: 'line',
                        data: values
                    },
                    {
                        name: '参考线',
                        type: 'line',
                        data: planValues
                    }
                ]
            }}
        />
    );
};

const VersionLine = ({ detail = {} }) => (
    <Row className={styles.wrapper}>
        <Row style={{ padding: '16px 0 37px 0' }}>
            <Col span={12}>
                <Row type="flex" justify="space-around">
                    <div className={styles.infoBox}>
                        <p>总工作量</p>
                        <p>
                            <em>{detail.planWorkloadNum}</em>
                        </p>
                    </div>
                    <div className={styles.infoBox}>
                        <p>已完成</p>
                        <p>
                            <em>{detail.actualDoneWorkloadNum}</em>
                        </p>
                    </div>
                    <div className={styles.infoBox}>
                        <p>剩余工作</p>
                        <p>
                            <em>{detail.remainWorkloadNum}</em>
                        </p>
                    </div>
                </Row>
            </Col>
            <Col span={12} style={{ borderLeft: '1px solid rgba(0,0,0,0.15)' }}>
                <Row type="flex" justify="space-around">
                    <div className={cn(styles.infoBox, styles.infoSmall)}>
                        <p>开始时间</p>
                        <p>
                            <em>{detail.versionStartDate || '--'}</em>
                        </p>
                    </div>
                    <div className={cn(styles.infoBox, styles.infoSmall)}>
                        <p>计划上线</p>
                        <p>
                            <em>{detail.planOnlineDate || detail.versionEndDate || '--'}</em>
                        </p>
                    </div>
                    <div className={cn(styles.infoBox, styles.infoSmall)}>
                        <p>实际上线</p>
                        <p>
                            <em className={styles.colorGreen}>{detail.actualOnlineDate || '--'}</em>
                        </p>
                    </div>
                </Row>
            </Col>
        </Row>
        <Row style={{ height: 360 }}>{renderLine(detail)}</Row>
    </Row>
);

export default VersionLine;
